

<template>
    <div class="chatboxinput-main">
        <div class="toolbars">
            <el-popover
                placement="top-start"
                :width="400"
                trigger="click"
            >
                <template #reference>
                    <span class="toolbars-item"><el-icon><PictureRounded /></el-icon></span>
                </template>
                <div class="emoji-pane">
                    <span class="toolbars-emoji" v-for="emoji in emojis" :key="emoji"> {{ emoji.icon }} </span>
                </div>
            </el-popover>
            
            <span class="toolbars-item"  @click="handleTitleClick('startCapture')"><el-icon><Crop /></el-icon></span>
            <span class="toolbars-item"><el-icon><Message /></el-icon></span>
            <span class="toolbars-item"><el-icon><VideoPlay /></el-icon></span>
            <span class="toolbars-item"><el-icon><Location /></el-icon></span>
            <span class="toolbars-item"><el-icon><Monitor /></el-icon></span>
            <span class="toolbars-item"><el-icon><MessageBox /></el-icon></span>
            <span class="toolbars-item"><el-icon><Service /></el-icon></span>
        </div>
        <div id="input" ref="ip" contenteditable='true' @click="db"></div>
        <div class="send">
            <button class="btn" @click="send">发送(S)</button>
        </div>
    </div>
</template>

<script>
import { reactive, toRefs, onMounted } from "vue";

export default {
    name: "ChatBoxInput",
    
    setup() {
        const state = reactive({
            emojis:[{
                    className: 'bg-1f604',
                    icon: '😄'
                },
                {
                    className: 'bg-1f603',
                    icon: '😃'
                },
                {
                    className: 'bg-1f600',
                    icon: '😀'
                },
                {
                    className: 'bg-1f60a',
                    icon: '😊'
                },
                {
                    className: 'bg-1f609',
                    icon: '😉'
                },
                {
                    className: 'bg-1f60d',
                    icon: '😍'
                },
                {
                    className: 'bg-1f618',
                    icon: '😘'
                },
                {
                    className: 'bg-1f61a',
                    icon: '😚'
                },
                {
                    className: 'bg-1f617',
                    icon: '😗'
                },
                {
                    className: 'bg-1f619',
                    icon: '😙'
                },
                {
                    className: 'bg-1f61c',
                    icon: '😜'
                },
                {
                    className: 'bg-1f61d',
                    icon: '😝'
                },
                {
                    className: 'bg-1f61b',
                    icon: '😛'
                },
                {
                    className: 'bg-1f633',
                    icon: '😳'
                },
                {
                    className: 'bg-1f601',
                    icon: '😁'
                },
                {
                    className: 'bg-1f614',
                    icon: '😔'
                },
                {
                    className: 'bg-1f60c',
                    icon: '😌'
                },
                {
                    className: 'bg-1f612',
                    icon: '😒'
                },
                {
                    className: 'bg-1f61e',
                    icon: '😞'
                },
                {
                    className: 'bg-1f623',
                    icon: '😣'
                },
                {
                    className: 'bg-1f622',
                    icon: '😢'
                },
                {
                    className: 'bg-1f602',
                    icon: '😂'
                },
                {
                    className: 'bg-1f62d',
                    icon: '😭'
                },
                {
                    className: 'bg-1f62a',
                    icon: '😪'
                },
                {
                    className: 'bg-1f625',
                    icon: '😥'
                },
                {
                    className: 'bg-1f630',
                    icon: '😰'
                },
                {
                    className: 'bg-1f605',
                    icon: '😅'
                },
                {
                    className: 'bg-1f613',
                    icon: '😓'
                },
                {
                    className: 'bg-1f629',
                    icon: '😩'
                },
                {
                    className: 'bg-1f62b',
                    icon: '😫'
                },
                {
                    className: 'bg-1f628',
                    icon: '😨'
                },
                {
                    className: 'bg-1f631',
                    icon: '😱'
                },
                {
                    className: 'bg-1f620',
                    icon: '😠'
                },
                {
                    className: 'bg-1f621',
                    icon: '😡'
                },
                {
                    className: 'bg-1f624',
                    icon: '😤'
                },
                {
                    className: 'bg-1f616',
                    icon: '😖'
                },
                {
                    className: 'bg-1f606',
                    icon: '😆'
                },
                {
                    className: 'bg-1f60b',
                    icon: '😋'
                },
                {
                    className: 'bg-1f637',
                    icon: '😷'
                },
                {
                    className: 'bg-1f60e',
                    icon: '😎'
                },
                {
                    className: 'bg-1f634',
                    icon: '😴'
                },
                {
                    className: 'bg-1f635',
                    icon: '😵'
                },
                {
                    className: 'bg-1f632',
                    icon: '😲'
                },
                {
                    className: 'bg-1f61f',
                    icon: '😟'
                },
                {
                    className: 'bg-1f626',
                    icon: '😦'
                },
                {
                    className: 'bg-1f627',
                    icon: '😧'
                },
                {
                    className: 'bg-1f608',
                    icon: '😈'
                },
                {
                    className: 'bg-1f47f',
                    icon: '👿'
                },
                {
                    className: 'bg-1f62e',
                    icon: '😮'
                },
                {
                    className: 'bg-1f62c',
                    icon: '😬'
                },
                {
                    className: 'bg-1f610',
                    icon: '😐'
                },
                {
                    className: 'bg-1f615',
                    icon: '😕'
                },
                {
                    className: 'bg-1f62f',
                    icon: '😯'
                },
                {
                    className: 'bg-1f636',
                    icon: '😶'
                },
                {
                    className: 'bg-1f607',
                    icon: '😇'
                },
                {
                    className: 'bg-1f60f',
                    icon: '😏'
                },
                {
                    className: 'bg-1f611',
                    icon: '😑'
                },
                {
                    className: 'bg-1f63a',
                    icon: '😺'
                },
                {
                    className: 'bg-1f638',
                    icon: '😸'
                },
                {
                    className: 'bg-1f63b',
                    icon: '😻'
                },
                {
                    className: 'bg-1f63d',
                    icon: '😽'
                },
                {
                    className: 'bg-1f63c',
                    icon: '😼'
                },
            
                {
                    className: 'bg-1f640',
                    icon: '🙀'
                },
                {
                    className: 'bg-1f63f',
                    icon: '😿'
                },
                {
                    className: 'bg-1f639',
                    icon: '😹'
                },
                {
                    className: 'bg-1f63e',
                    icon: '😾'
                }
            ]
        });

        onMounted(() => {
        });

        function handleTitleClick(type) {
            console.log(type);
            setTimeout(async ()  =>  {  
                const filePath = await window.send[type](type);
                console.log(filePath);
            }, 100);  
        }

        return {
            ...toRefs(state),
            handleTitleClick
        };
    },
};
</script>

<style lang="scss">
.emoji-pane {
    display: flex;  
    flex-wrap: wrap; /* 允许自动换行 */  
    justify-content: center; /* 子元素在行内居中 */  
    align-items: center; /* 子元素在交叉轴居中 */ 
    .toolbars-emoji {
        display: inline-block;
        width: 32px;
        height: 32px;
        text-align: center;
        line-height: 32px;
        border: 1px solid #e6e7e855;
        font-size: 20px;

        &:hover {
            border: 1px solid #c0c0c0;
        }
    }
}

</style>

<style lang="scss" scoped>

.chatboxinput-main {
    border: 1px solid #e7e7e8;
    margin: 10px 10px;
    border-radius: 10px;
    background: #ffffff;
    padding: 10px 16px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 40px);

    .toolbars {
        display: flex;
        flex-direction: row;
        font-size: 20px;
        color: #7c7e80;
        font-weight: 100;
        
        .toolbars-item {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: auto;
            line-height: 32px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center; 
            justify-content: center;
            border-radius: 5px;

            &:hover {
                background: #f3f4f4;
            }
        }
        .toolbars-item:last-child {
            margin-left: auto;
            margin-right: 0;
        }
    }

    #input {
        flex: 1;
        overflow-y: auto;
        outline: none;
        width: 100%;
        color: #000;
        font-size: 14px;
        font-family: 微软雅黑, serif;
        word-wrap: break-word;
        word-break: break-all;
        overflow-x: hidden;
        text-align: left;
        
        /*定义滚动条高宽及背景
        高宽分别对应横竖滚动条的尺寸*/
        &::-webkit-scrollbar {
            width: 8px;
            height: 8px;
            background-color: rgba(0,0,0,.2);
        }

        /*定义滚动条轨道
        内阴影+圆角*/
        &::-webkit-scrollbar-track
        {
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);
            border-radius:10px;
            background-color:#F5F5F5;
        }
        /*定义滑块
        内阴影+圆角*/
        &::-webkit-scrollbar-thumb
        {
            border-radius:10px;
            -webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.3);
            background-color: #b3b3b3;
        }

        .file {
            cursor: default;
            height: 45px;
            padding: 5px 10px;
            width: 300px;
            position: relative;
            border: 0.5px solid #d0d0d0;
            border-radius: 3px;
            
            &:hover {
                background: #d0cecd;
            }
            
            .el-icon-close {
                position: absolute;
                top: 3px;
                right: 5px;
                cursor: pointer;
                color: #969696;
                
                &:hover {
                    color: #6b6b6b
                }
            }
            
            .el-icon-document {
                color: #969696;
                font-size: 40px;
                float: left;
            }
            
            .info {
                margin-left: 15px;
                font-size: small;
                float: left;
                
                p {
                    margin: 0
                }
            }
        }
    }

    .btn {
        float: right;
        border: 0;
        background: transparent;
        color: #9da0a3;
        text-align: right;

        &:hover {
            color: #6d7176;
        }
    }
}

</style>
